import React from 'react';
import { Button, Toast, List, InputItem, ImagePicker, Picker } from 'antd-mobile';
import { createForm } from 'rc-form';
import * as request from '../request';
import ico_avatar from '../static/ico_avatar.svg';

const Item = List.Item;
const apiURL = "/api/services/app/Members/";
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: {},
            files: [],
            selRole: ['爸爸'],
            loading: false,
            isUpload: false,
        }
    }
    componentDidMount() {
        const currentUser = this.props.state.currentUser;
        if (currentUser) {
            this.setState({ data: currentUser });
            var img = {
                url: currentUser.avatar ? request.imgServer + currentUser.avatar : ico_avatar,
                id: currentUser.avatar
            }
            this.setState({
                files: [img],
            });
            this.props.form.setFieldsValue({
                nickname: currentUser.nickname,
                mobile: currentUser.mobile,
                email: currentUser.email,
                role: [currentUser.role],
                ethnicity: [currentUser.ethnicity],
                city: currentUser.city,
            });
        }
    }
    onSubmit = () => {
        const currentUser = this.props.state.currentUser;
        const { files, isUpload } = this.state;
        this.props.form.validateFields((error, value) => {
            this.setState({ loading: true });
            value.id = currentUser.id;
            value.avatar = currentUser.avatar;
            value.role = value.role[0];
            value.sex = value.role === '爸爸' ? '男' : '女';
            value.ethnicity = value.ethnicity[0];
            var act = 'Update';
            console.log(value);
            if (!error) {
                if (files.length > 0 && isUpload) {
                    request.uploadPic(files, value.id, "Member", "avatar").then((resp) => {
                        value.avatar = resp;
                        this.doUpdate(act, value);
                    });
                }
                else
                    this.doUpdate(act, value);
            }
            else
                this.setState({ loading: false });
        });
    }
    doUpdate = (act, value) => {
        request.put(apiURL + act, value).then((response) => {
            if (response) {
                if (response.success) {
                    this.props.state.dispatch({
                        type: "setCurrUser",
                        data: response.result,
                    })
                    Toast.info('更新成功！');
                }
                else {
                    Toast.fail(response.error.message);
                }
                this.setState({ loading: false });
            }
        });
    }
    onChange = (files, type, index) => {
        console.log(files, type, index);
        this.setState({
            files,
            isUpload: true
        });
    }
    render() {
        const { loading, files } = this.state;
        const { getFieldProps, getFieldError } = this.props.form;
        const roles = [
            {
                label: '父亲',
                value: '父亲',
            },
            {
                label: '母亲',
                value: '母亲',
            },
        ];
        var ethnicity = [];
        request.mingzu.map(item => {
            ethnicity.push({
                label: item,
                value: item,
            })
        });
        return (
            <div style={{ marginBottom: 60 }}>
                <form>
                    <List>
                        <Item>
                            <ImagePicker
                                files={files}
                                onChange={this.onChange}
                                onImageClick={(index, fs) => console.log(index, fs)}
                                selectable={files.length < 1}
                                multiple={false}
                                disableDelete={false}
                            />
                            </Item>
                        <InputItem
                            {...getFieldProps('nickname', {
                                rules: [
                                    { required: true, message: '请输入昵称' }
                                ],
                            })}
                            placeholder="请输入昵称"
                            clear
                            error={!!getFieldError('nickname')}
                            onErrorClick={() => {
                                Toast.info(getFieldError('nickname').join('、'));
                            }}
                        >昵称</InputItem>
                        <InputItem {...getFieldProps('mobile', {
                            rules: [
                                { required: true, message: '请输入手机号码' },
                            ],
                        })}
                            placeholder="请输入手机号码"
                            type='phone'
                            error={!!getFieldError('mobile')}
                            onErrorClick={() => {
                                Toast.info(getFieldError('mobile').join('、'));
                            }}> 手机号码 </InputItem>
                        <InputItem {...getFieldProps('email')}> 邮箱 </InputItem>
                        <Picker data={ethnicity} cols={1} {...getFieldProps('ethnicity')}>
                            <List.Item arrow="horizontal">民族</List.Item>
                        </Picker>
                        <InputItem {...getFieldProps('city')}> 城市 </InputItem>
                        <Picker data={roles} cols={1} {...getFieldProps('role')}>
                            <List.Item arrow="horizontal">角色</List.Item>
                        </Picker>

                        <Item>
                            <Button type="primary" onClick={this.onSubmit} loading={loading} disabled={!this.state.data}>提交</Button>
                        </Item>

                    </List>
                </form>

            </div>
        )
    };
}

export default createForm()(App);
